<template>
    <div>
      <!--<template>-->
        <!--<el-carousel indicator-position="outside">-->
          <!--<el-carousel-item v-for="item in banners" :key="item">-->
            <!--<h3>{{item.title}}</h3>-->
          <!--</el-carousel-item>-->
        <!--</el-carousel>-->
      <!--</template>-->
      <el-carousel indicator-position="outside">
        <el-carousel-item id="home1">
          <h1>欢迎使用油信通企业管理平台！</h1>
        </el-carousel-item>
        <el-carousel-item id="home2">
          <h1>欢迎使用油信通企业管理平台！</h1>
        </el-carousel-item>
        <el-carousel-item id="home3">
          <h1>欢迎使用油信通企业管理平台！</h1>
        </el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
    export default {
        name: 'Dashboard',
        data() {
            return {
              banners:[
                {
                  title:"欢迎使用油信通企业管理平台！"
                },
                {
                  title:"欢迎使用油信通企业管理平台！"
                },
                {
                  title:"欢迎使用油信通企业管理平台！"
                }
              ]
            }
        }
    }
</script>

<style lang="stylus" scoped>
  .el-carousel__item h1
    color: #DDDDDD;
    font-size: 48px;
    line-height: 300px;
    margin: 0;

  #home1
    background-image: url(../../assets/home-1.png);
  #home2
    background-image: url(../../assets/home-2.png);
  #home3
    background-image: url(../../assets/home-3.png);
</style>
